<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  />
    <link rel="stylesheet" type="text/css" href="css/validate.css"  />
    <script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
    <script>

        $(function () {
            function validateRoleName() {
                var result=false;
                var roleName = $("#roleName").val();
                if(roleName==""){
                    $("#roleName_msg").removeClass().addClass("validate_error").html("用户名不能为空");
                    return false;
                }
                else{
                    $.ajax({
                        url: "RoleServlet.do",
                        type: "POST",
                        async:false,
                        data: {roleName: $("#roleName").val(),flag:"validate"},
                        success: function (data) {
                            if(data == "-1"){
                                result=false;
                                $("#roleName_msg").removeClass().addClass("validate_error").html("用户名已存在");
                            }else {
                                result=true;
                                $("#roleName_msg").removeClass().addClass("validate_ok").html("✓");
                            }
                        }
                    });
                }
                return result;
            }

            $("#roleName").blur(function () {
                validateRoleName();
            });

            $("#form_btn").click(function () {
                var result=true;
                if (validateRoleName()==false) {
                    result=false;
                }
                if(result==true){
                    return confirm("请确认提交");
                }
                return result;
            });
        });

    </script>
</head>
<body>
<div class="div_title">
    <div class="div_titlename"><img src="images/san_jiao.gif"><span>创建角色</span></div>
</div>

<form action="RoleServlet.do" method="post">
    <input type="hidden" name="flag" value="add">
    <table class="edit_table">
        <tr>
            <td class="td_info">角色账号:</td>
            <td class="td_input_short">
                <input type="text" class="txtbox" id="roleName" name="roleName" value="${param.roleName}"/>
            </td>
            <td>
                <label class="validate_info" id="roleName_msg">用户名不能为空</label>
            </td>
        </tr>
        <tr>
            <td class="td_info">角色描述:</td>
            <td><textarea rows="4" cols="27" name="des" class="txtarea">${param.des}</textarea></td>
            <td><label></label></td>
        </tr>
        <tr>
            <td class="td_info"></td>
            <td>
                <input class="form_btn" id="form_btn" type="submit" value="提交"/>
                <input type="reset" class="form_btn" value="重置"/></td>
            <td>
                <label id="result_msg" class="result_msg">${msg}</label>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
